/***
* @author: Nonlinear_fish
* @date:2025-02-15.17:29
* @description:该模块为一个展示新发布的比赛的列表，包括一些基本信息但要少于contestDetail，
*/
<script setup>
// import {defineProps} from 'vue'
// const p = defineProps(['msg'])
const list = ["1", "2", "3", "4"];
</script>

<template>
  <div  v-for="(item, index) in list" :key="index">
    <div class="title">
      <h1 style="margin-top: 1rem; margin-bottom: 0">title</h1>
    </div>
    <div class="detailLess" >
      <a-card :bordered="false" style=" width: 0.5rem; margin: 0; background-color: #48535F"></a-card>
      <a-card class="card" :bordered="false">
        <p>{{item}}</p>
        <p>Card content</p>
        <p>Card content</p>
        <p>Card content</p>
        <p>Card content</p>
        <p>Card content</p>
      </a-card>
    </div>
  </div>
</template>

<style scoped>
.title{
  text-align: left;
  color: #9AA4B1;
  font-size: 1.5rem;
}
.detailLess {
  width: 100%;
  margin: 0.2rem;
  display: flex;

  .card{
    width: 100%;
    text-align: left;
    background-color: #22272E;
    color: #9AA4B1;
  }
}
</style>